<template>
 <Drawer title="权限设置" :closable="true" v-model="drawer"  @askData="askData" width="90%">
    <div>
        <Table row-key="id" :columns="columns" :data="powerkList" border :disabled-hover="true" max-height="800">
            <template slot-scope="{ row, index }" slot="action">
                <div  style="display: inline;word-wrap:break-word">
                    <div v-for="(item,i) in row.checkAllGroup" :key="item.value" class="ivu-mb-8">
                    <Checkbox
                    :indeterminate="item.indeterminate"
                    :value="item.checkAll"
                    @click.prevent.native="handleCheckAll(row, item)"></Checkbox>
                    </div>
                    <!-- <div >
                        <Checkbox v-model="modalparams.action_ids" v-for="(it,inx) in row.action_list" :key="it.value" :value="it.value" @on-change="checkAllGroupChange(row,it)">{{it.title}}</Checkbox>
                    </div> -->
                    <CheckboxGroup v-model="modalparams.action_ids" v-for="(it,inx) in row.action_list" :key="it.value"  @on-change="checkAllGroupChange(row,it)" >
                        <Checkbox :label="it.value">{{it.title}}</Checkbox>
                    </CheckboxGroup>
                </div>
            </template>
        </Table>
    </div>
    <div class="demo-drawer-footer">
        <Button  style="margin-right: 8px" @click="drawer=false">取消</Button>
        <Button type="primary"  @click='submitedit'>提交</Button>
    </div>
 </Drawer>
</template>
<script>
    import { getRoleInfo, rolePreSet } from '@/api/powersetting.js';
    export default {

        data () {
            return {
                drawer: false,
                modalparams: { id: 0, action_ids: [], menu_ids: [] },
                powerkList: [],
                changeData: [],
                columns: [
                    {
                        title: '模块标题',
                        key: 'title',
                        width: '200',
                        tree: true
                    },
                    {
                        title: '功能权限',
                        slot: 'action'
                    }
                ],
                childData: []
            }
        },
        methods: {
            selectactionfun (item, row) {
                //(item.selectaction, 'a')
                item.children.forEach(it => {
                    this.modalparams.module_ids.push(it.module_id)
                    if (it.value == row.value) {
                        this.modalparams.menu_ids.push(it.value)
                    }
                })
                this.modalparams.module_ids = [...new Set(this.modalparams.module_ids)]
                this.modalparams.menu_ids = [...new Set(this.modalparams.menu_ids)]
                // 当前子模块没有时
                // console.log(item.selectaction.length)
                if (item.allaction.length == item.selectaction.length) {
                    item.checkAllGroup[0].indeterminate = false
                    item.checkAllGroup[0].checkAll = true
                } else if (item.selectaction.length == 0) {
                    item.checkAllGroup[0].indeterminate = false
                    item.checkAllGroup[0].checkAll = false
                    let moduleData = []
                    let menuData = []
                    moduleData.push(item.value)
                    this.modalparams.module_ids = this.modalparams.module_ids.filter(expit => !moduleData.includes(expit))
                    menuData.push(row.value)
                    this.modalparams.menu_ids = this.modalparams.menu_ids.filter(expit => !menuData.includes(expit))
                } else {
                    item.checkAllGroup[0].indeterminate = true
                    item.checkAllGroup[0].checkAll = false
                }
            },
            initial (row) {
                this.drawer = true
                this.modalparams = { id: row.id, action_ids: [], menu_ids: [], module_ids: [] };
                this.askData(row)
            },
            askData (row) {
                getRoleInfo({ id: row.id, type: 1 }).then((res) => {
                    this.powerkList = res.auth.map(item => {
                        return { ...item, selectaction: [], allaction: [], _showChildren: true }
                    })
                    for (let item of this.powerkList) {
                        for (let its of item.children) {
                            for (let it of its.action_list) {
                                item.allaction.push(it.value)
                                if (res.action_ids.indexOf(it.value) > -1) {
                                    item.selectaction.push(it.value)
                                }
                            }
                        }
                    }
                    this.modalparams.action_ids = [...res.action_ids]
                    this.modalparams.menu_ids = res.menu_ids
                    this.modalparams.module_ids = res.module_ids
                })
            },

            // 请求数据处理
            checkAllGroupChange (row, item) {
                // debugger
                // 提取每个模块下子目录下的配置 vlaue
                // 获取返回数据中当前所有动作value集合
                this.powerkList.forEach(list => {
                    if (row.module_id == list.value) {
                        if (list.selectaction.indexOf(item.value) > -1) list.selectaction.splice(list.selectaction.indexOf(item.value), 1)
                        else list.selectaction.push(item.value)
                        this.selectactionfun(list, row)
                    }
                })
            },
            // 全选和取消全选
            handleCheckAll (row, item) {
                if (item.value === row.value) {
                    if (row.checkAllGroup[0].indeterminate) {
                        row.checkAllGroup[0].checkAll = false;
                    } else {
                        row.checkAllGroup[0].checkAll = !row.checkAllGroup[0].checkAll;
                    }
                    row.checkAllGroup[0].indeterminate = false;
                    // 全选
                    if (row.checkAllGroup[0].checkAll) {
                        this.modalparams.module_ids.push(item.value)
                        row.children.forEach(it => {
                            this.modalparams.menu_ids.push(it.value)
                            it.action_list.forEach(exp => {
                                exp.checked = true
                                this.modalparams.action_ids.push(exp.value)
                                // row.selectaction.push(it.value)
                                this.powerkList.forEach(list => {
                                    if (row.value == list.value) {
                                        list.selectaction.push(exp.value)
                                        list.checkAllGroup[0].indeterminate = false;
                                        list.checkAllGroup[0].checkAll = true;
                                    }
                                })
                            })
                        })
                    } else {
                        let data = []
                        // 取消全选
                        const moduleData = []
                        const menuData = []
                        moduleData.push(item.value)
                        this.modalparams.module_ids = this.modalparams.module_ids.filter(expit => !moduleData.includes(expit))
                        row.children.forEach(it => {
                            menuData.push(it.value)
                            this.modalparams.menu_ids = this.modalparams.menu_ids.filter(expit => !menuData.includes(expit))
                            it.action_list.forEach(exp => {
                                exp.checked = false
                                data.push(exp.value)

                                // data.push(exp.value)
                            })
                        })
                        this.powerkList.forEach(list => {
                            if (row.value == list.value) {
                                list.selectaction = []
                                list.checkAllGroup[0].indeterminate = false;
                                list.checkAllGroup[0].checkAll = false;
                            }
                        })

                        this.modalparams.action_ids = this.modalparams.action_ids.filter(expit => !data.includes(expit))
                    }
                }

                // if (row.checkAll) {
                //     item.checkAllGroup = item.checkAllGroup;
                // } else {
                //     item.checkAllGroup = [];
                // }
            },
            // 提交数据
            submitedit () {
                let modalparams = {
                    module_ids: [],
                    action_ids: [],
                    menu_ids: []
                }
                for (let item of this.powerkList) {
                    for (let its of item.children) {
                        for (let it of its.action_list) {
                            for (let res of this.modalparams.action_ids) {
                                if (res == it.value) {
                                    modalparams.action_ids.push(it.value)
                                    modalparams.menu_ids.push(its.value)
                                    modalparams.module_ids.push(its.module_id)
                                }
                            }
                        }
                    }
                }
                modalparams.menu_ids = Array.from(new Set(modalparams.menu_ids))
                modalparams.module_ids = Array.from(new Set(modalparams.module_ids))
                let params = {
                    id: this.modalparams.id,
                    module_ids: modalparams.module_ids.join(','),
                    action_ids: modalparams.action_ids.join(','),
                    menu_ids: modalparams.menu_ids.join(',')
                }
                // let params = {
                //     id: this.modalparams.id,
                //     module_ids: this.modalparams.module_ids.join(','),
                //     action_ids: this.modalparams.action_ids.join(','),
                //     menu_ids: this.modalparams.menu_ids.join(',')
                // }
                rolePreSet(params).then(() => {
                    this.$Message.success('授权成功')
                    this.drawer = false
                })
            }
        }
    }
</script>
<style scoped>
.demo-drawer-footer{
    width: 100%;
    position: absolute;
    /* top: 0; */
    bottom: 0;
    left: 0;
    /* border-top: 1px solid #e8e8e8; */
    padding: 10px 30px;
    text-align: right;
    /* background: #fff; */
    }
/deep/.ivu-checkbox-group{
    display: inline-block;
}
</style>
